<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Sliding Triangle</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="380" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;

    // Canvas origin coordinates
    const ox = 60;
    const oy = 320;

    // --- Draw Axes ---
    ctx.font = 'italic 22px "Times New Roman"';
    // X-axis
    ctx.beginPath();
    ctx.moveTo(ox, oy);
    ctx.lineTo(ox + 300, oy);
    ctx.stroke();
    // X-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(ox + 300, oy);
    ctx.lineTo(ox + 290, oy - 6);
    ctx.lineTo(ox + 290, oy + 6);
    ctx.closePath();
    ctx.fill();
    ctx.fillText('x', ox + 305, oy + 8);

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(ox, oy);
    ctx.lineTo(ox, oy - 300);
    ctx.stroke();
    // Y-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(ox, oy - 300);
    ctx.lineTo(ox - 6, oy - 290);
    ctx.lineTo(ox + 6, oy - 290);
    ctx.closePath();
    ctx.fill();
    ctx.fillText('y', ox + 5, oy - 295);

    // Origin Label
    ctx.fillText('O', ox - 25, oy + 20);

    // --- Triangle Parameters ---
    // Let the hypotenuse AB have length L
    const L = 270;
    // Let the angle the ladder makes with the x-axis be theta.
    // A large theta makes B closer to O, matching the original image.
    const theta = 75 * Math.PI / 180; 
    
    // Side lengths a (BC) and b (AC) using a 4:3 ratio for the legs
    const a = (4/5) * L;
    const b = (3/5) * L;
    
    // Angle beta = angle CAB in the triangle. We need this to locate C.
    // sin(beta) = BC/AB = a/L, cos(beta) = AC/AB = b/L
    const beta = Math.asin(a/L);

    // --- Vertex Coordinates in Canvas Frame ---
    // A is on y-axis
    const Ax = ox;
    const Ay = oy - L * Math.sin(theta);
    // B is on x-axis
    const Bx = ox + L * Math.cos(theta);
    const By = oy;
    // C is calculated based on its fixed position relative to A and B
    const Cx = ox + b * Math.cos(theta - beta);
    const Cy = oy - a * Math.cos(theta - beta);

    // --- Draw Triangle ABC ---
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Cx, Cy);
    ctx.lineTo(Bx, By);
    ctx.closePath(); // This also draws the hypotenuse AB
    ctx.stroke();

    // --- Labels for Vertices and Sides ---
    ctx.fillText('A', Ax - 25, Ay + 5);
    ctx.fillText('C', Cx + 10, Cy + 10);
    ctx.fillText('a', (Bx + Cx) / 2, (By + Cy) / 2 + 20);
    ctx.fillText('b', (Ax + Cx) / 2 + 10, (Ay + Cy) / 2);

    // --- Motion Arrows ---
    ctx.lineWidth = 2;
    // Arrow for A's motion (down along y-axis)
    ctx.beginPath();
    ctx.moveTo(Ax, Ay + 20);
    ctx.lineTo(Ax, Ay + 60);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(Ax, Ay + 60);
    ctx.lineTo(Ax - 5, Ay + 50);
    ctx.lineTo(Ax + 5, Ay + 50);
    ctx.closePath();
    ctx.fill();

    // Arrow for B's motion (right along x-axis)
    const B_arrow_start_x = Bx;
    const B_arrow_end_x = Bx + 60;
    ctx.beginPath();
    ctx.moveTo(B_arrow_start_x, By);
    ctx.lineTo(B_arrow_end_x, By);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(B_arrow_end_x, By);
    ctx.lineTo(B_arrow_end_x - 10, By - 5);
    ctx.lineTo(B_arrow_end_x - 10, By + 5);
    ctx.closePath();
    ctx.fill();
    // Label for the motion of B, as in the original image
    ctx.fillText('B', B_arrow_start_x + 5, By - 10);

    // --- Figure Caption ---
    ctx.font = '20px "SimSun"';
    ctx.fillStyle = 'black';
    ctx.fillText('图 1', canvas.width / 2 - 20, oy + 45);
    
</script>
</body>
</html>